<script>
$(".tags").click(function (){
	var nam = $(this).attr("name");
	var oldstuff = $("#old_restrictions").attr("name");
	var tq = $("#tag_query").attr("name");
	//$("#old_restrictions").text("Hello")
	var restricts = oldstuff + " " + nam;
	//alert(oldstuff+" "+nam);
	$("#search_results").load("/cards/ajax",{query:tq, restrict: restricts});
});

$(".expand_card").click(function () {
	$(this).next(".card_details").toggle();
});

$(".select_card_new").click(function() {
	$(this).parent().clone().appendTo("#reading_pane_main");
	$("#reading_pane_main > .highlight > .card_details").show();
	$("#reading_pane_main > .highlight").children(".select_card_new").remove();
	$('<span class="remove_card_2">Remove<span>').appendTo("#reading_pane_main > .highlight:last");
	$(".remove_card_2").click(function () {
		var Papa = $(this).parent();
		var pos = $("#reading_pane_main").children(".highlight").index(Papa);
		pos = pos +1;			
		//$("#displaystuff").text(pos);
		$("#side-c").show();
		//$("#selected .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});
		$("#selected .highlight:nth-child("+pos+")").remove();						
		$("#side-c").hide();
		$(this).parent().remove();
	});

	$(this).parent().clone().appendTo("#selected");
	//$('<span class="remove_card">Remove<span>').appendTo("#selected");
	$("#selected > .highlight").css("max-width", "90%");
	$("#selected > .highlight").children(".select_card_new").remove();
	$("<span class='remove_card'>Remove</span>").appendTo("#selected > .highlight:last");
	$(".remove_card").click(function () {
		var Papa = $(this).parent();
		var pos = $("#selected").children(".highlight").index(Papa);
		pos = pos +1;			
		//$("#displaystuff").text(pos);
		$("#side-r").show();
		//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});
		$("#reading_pane_main .highlight:nth-child("+pos+")").remove();						
		$("#side-r").hide();
		$(this).parent().remove();
	});
	//$("#selected > .highlight").toggleClass(".minihighlight");  //This should be working
	$("#selected > .highlight > .card_tags").hide();
	$("#selected > .highlight > .expand_card").hide();
	$("#selected > .highlight > .card_details").hide();

	//$(this).parent().css({'border':'green solid 3px'});
	//$(this).parent().children(".card_title").css({'border':'green solid 3px'});
});

$(".highlight").mouseover(function(){
	var i_ndex = $("#search_results").children(".highlight").index(this);
	//$("#displaystuff").text(i_ndex);
	//$(this).css({'border':'red solid 3px'});
	//$(this).children(".card_details").show();
}).mouseout(function(){
	//$(this).css({'border':'black solid 3px'});
	//$(this).children(".card_details").hide();
});

//$(".highlight:last").css("background","green"); <ul class="card_variables">{%for c in card.variables.all%}<li> {{c.si_units}}</li> {%endfor %}</ul>


</script>

<p id="tag_query" name="{{tagquery}}"></p>
{%if tags%}
<p id="old_restrictions" name="{{restrictions}}"><span><b>Restrictions:</b></span> <span>{{restrictions}}</span> <span id="clear_restrctions"><i>Clear</i></span> </p>

<h3>Tags: Click on them to remove results containing these tags</h3>
{%endif%}
<p>
{%for tag in tags%}
<p class="tags" href="" name="{{tag.name}}">{{tag}}</p>
{%endfor%}
</p>
<br>


{%for card in index_cards%}
<div class='highlight'>

<p class="card_title"><b><i>{{card.title}}</b></i></p> <p class="card_tags">TAGS: {%for j in card.tags.all%} {{j.name}} {%endfor%}</p>
<center><img height=30px src="/postimg/{{card.image}}" alt={{card.equation}} class="card_image"></center> 
<span class="select_card_new">Select</span><span class="expand_card"><i color=blue>more</i></span> <p class="card_details"> <br>{{card.details}}</p>
{{card.reference}}
</div>
{%endfor%}


<script>
$(".expand_card").click(function () {
	$(this).next(".card_details").toggle();
});
</script>
